<template>
  <d2-container type="full" :betterScroll="false">
    <template slot="header">数据库查询</template>
    <div style="height: 400px; margin: -16px;">
      <SplitPane :min-percent='20' :default-percent='70' split="horizontal">
        <template slot="paneL">
          <SplitPane :min-percent='10' :default-percent='70' split="vertical">
            <template slot="paneL">
              <div style="margin: 10px;">
                <el-input
                  type="textarea"
                  :rows="10"
                  resize="none"
                  :show-word-limit="true"
                  placeholder="请输入sql"
                  v-model="textarea1">
                </el-input>
              </div>
            </template>
            <template slot="paneR">
              <div style="margin: 10px;">
                <el-col>
                  <el-select v-model="type" @change="getinstance(type)" filterable :clearable=true placeholder="请选择数据库类型">
                    <el-option
                      v-for="item in types"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col>
                  <el-select v-model="instance_id" @change="getdatabase(instance_id)" filterable :clearable=true placeholder="请选择instance">
                    <el-option
                      v-for="item in instances"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col>
                  <el-select v-model="database" filterable :clearable=true placeholder="请选择database">
                    <el-option
                      v-for="item in databases"
                      :key="item"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col>
                  <el-select v-model="num" filterable :clearable=true placeholder="返回行数">
                    <el-option
                      v-for="item in nums"
                      :key="item"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                </el-col>
                  <el-button type="success" @click="query()">查询</el-button>
              </div>
            </template>
          </SplitPane>
        </template>

        <template slot="paneL">
          <div style="margin: 10px;">
            <template>
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="查询结果" name="result">
                  <template>
                    <el-table
                      :data="queryReslut[0]"
                      style="width: 100%">
                      :lazy="true"
                      :load="true"
                      <el-table-column
                        v-for="(item,index) in queryReslut[1]"
                        :key="index"
                        :label="item"
                        width="180">
                        <template slot-scope="scope">
                        {{ scope.row[index] }}
                        </template>
                      </el-table-column>
                  </el-table>
                  </template>
                </el-tab-pane>
                <el-tab-pane label="查询历史" name="history">
                  <template>
                    <el-table
                      :data="querylog"
                      height="250"
                      max-height="250"
                      border
                      style="width: 100%">
                      <el-table-column
                        prop="username"
                        label="用户"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="db_type"
                        label="数据库类型"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="instance"
                        label="实例"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="database"
                        label="数据库"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="time_query"
                        label="查询时间"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="query_sql"
                        label="查询语句"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="instance"
                        label="返回行数"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="time_cost"
                        label="耗时"
                        width="180">
                      </el-table-column>
                    </el-table>
                  </template>
                </el-tab-pane>
              </el-tabs>
            </template>
          </div>
        </template>
      </SplitPane>
    </div>
  </d2-container>
</template>

<script>
import Vue from 'vue'
import SplitPane from 'vue-splitpane'
import * as api from './api'
Vue.component('SplitPane', SplitPane)
export default {
  mounted () {
    // 加载完成后显示提示
    this.showInfo()
    this.getquerylog()
  },
  data () {
    return {
      queryReslut: [],
      types: [{
        value: 'redis',
        label: 'redis'
      }, {
        value: 'mysql',
        label: 'mysql'
      }],
      nums: [
        200,
        400,
        600
      ],
      value: '',
      instance_id: '',
      database: '',
      type: '',
      textarea1: '',
      instances: [],
      databases: [],
      num: [],
      activeName: 'result',
      querylog: []

    }
  },
  methods: {
    // 显示提示
    showInfo () {
      this.$notify({
        title: '提示',
        message: '在横向或者纵向的分割线上拖拽调整分区大小'
      })
    },
    getinstance (value) {
      this.instances = ''
      this.databases = ''
      this.instance = ''
      this.database = ''
      const params = { type: this.type }
      api.GetInstance(params).then(res => {
        this.instances = res
      })
    },
    getdatabase () {
      this.databases = ''
      this.database = ''
      const params = { instance_id: this.instance_id, db_type: this.type }
      api.GetDatabase(params).then(res => {
        this.databases = res.rows
        console.log(this.databases)
      })
    },
    query () {
      const params = { instance_id: this.instance_id, db_type: this.type, database: this.database, query_sql: this.textarea1 }
      api.Query(params).then(res => {
        this.queryReslut[0] = res.rows
        this.queryReslut[1] = res.column_list
        this.$forceUpdate()
      })
    },
    getquerylog () {
      // const params = { instance: this.instance, db_type: this.type, database: this.database, query_sql: this.textarea1 }
      const params = {}
      api.GetQuewrylog(params).then(res => {
        this.querylog = res
      })
    },
    handleClick () {
      console.log(this.activeName)
    }
  }
}
</script>
